<template>
  <div class="shi" id="shi">

  </div>
</template>

<script>
export default {
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = this.$echarts.init(document.getElementById('shi'));
      const options = {
        title: {
          text: '实物类出口比例',
          textStyle: {
            color: 'rgb(85, 85, 85)',
            fontSize: 14,
            fontWeight: 100
          }
        },
        color: ['#37a2da', '#32c5e9', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293', '#e7bcf3', '#8378ea'],
        tooltip: {

          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)',
        },
        toolbox: {
          show: true,
        },

        series: [
          {
            name: '实物类出口比例',
            type: 'pie',
            radius: [0, 35],

            data: this.shi.data,
            label: {
              show: true,
              color: 'inherit',
              position: 'outside',
              fontSize: 10,

            },
          },
        ],
      };


      chart.setOption(options);
      window.onresize = function () {
        chart.resize()
      }
    }
  },
  props: ['shi']
}
</script>

<style lang="less" scoped>
.shi {
  padding-top: 5px;
  width: 100%;
  height: 47%;
  background-color: #fff;

}
</style>